<template>
  <table-header
          :queryList="queryList"
          :rightColSpan="4"
          :leftColSpan="20"
          placeholder="请输入商品名称"
          @pagination="getGoodsDataList"
          label="keywords"
  >
    <template #operation>
      <span></span>
    </template>
  </table-header>
  <el-table
          ref="dialogSelfGoodsRef"
          v-loading="isloading"
          style="width: 100%"
          border
          :data="tableData.dataList"
          @row-click="handleRowClick"
          @select="handleSelect"
          @select-all="handleSelectAll"
          class="mt10"
  >
    <el-table-column type="selection" align="center" width="55" :selectable="handleSelectAble"/>
    <el-table-column label="海报预览" align="center">
      <template #default="{row}">
              <span @click.stop>
                <el-image
                        :src="row.imgurl_150"
                        :preview-src-list="imgSrcList"
                        :initial-index="initialIndex(row.imgurl_720)"
                />
              </span>
      </template>
    </el-table-column>
    <el-table-column label="商品ID" width="80" prop="goods_id" />
    <el-table-column label="商品名称" prop="goods_name" show-overflow-tooltip />
    <el-table-column label="商品货号" prop="goods_sn" />
    <el-table-column label="市场价" width="100">
      <template #default="{row}">
        {{row.market_price}} ￥
      </template>
    </el-table-column>
    <el-table-column label="实际售价" width="100">
      <template #default="{row}">
        {{row.goods_price}} ￥
      </template>
    </el-table-column>
    <el-table-column label="供应商" prop="supplier" width="100"/>
    <el-table-column label="商品状态" width="100">
      <template #default="{row}">
        <el-tag type="success" size="mini" v-if="row.state == 1">上架</el-tag>
        <el-tag type="danger" size="mini" v-else>下架</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="创建时间" width="150">
      <template #default="{row}">
        {{row.ctime ? row.ctime.replace('T', ' ') : '--'}}
      </template>
    </el-table-column>
  </el-table>
  <el-row>
    <el-col :span="24">
      <table-pagination
              :queryList="queryList"
              :total="tableData.total"
              @pagination="getGoodsDataList"
      />
    </el-col>
  </el-row>
</template>

<script setup>
  import {reactive, computed, ref, inject, defineExpose, nextTick, onMounted} from 'vue'
  import {useStore} from 'vuex'
  import {getGoodsList} from "@/api/media/goods";
  import TableHeader from "@/views/public/TableHeader";
  import TablePagination from "@/views/public/TablePagination";

  const relGoodsFormData = inject('relGoodsFormData')
  const goodsInfoList = inject('goodsInfoList')
  const goodsIds = inject('goodsIds')

  const initialIndex = computed(() => {
    return (src) => {
      return imgSrcList.value.findIndex(d => d === src)
    }
  })

  const store = useStore()
  const corpinfo = computed(() => {
    return store.getters.corpinfo
  })
  const isloading = ref(false)
  const queryList = reactive({
    corpid: corpinfo.value.corpid,
    page: 1,
    pagesize: 25,
    keywords: undefined,
    sort: 'mts',
    sorttype: 'desc'
  })
  const tableData = reactive({
    dataList: [],
    total: 0
  })
  const imgSrcList = ref([])

  const dialogSelfGoodsRef = ref(null)

  onMounted(() => {
    getGoodsDataList()
  })

  const getGoodsDataList = () => {
    isloading.value = true
    getGoodsList(queryList).then(response => {
      isloading.value = false
      const {total, list} = response.data
      tableData.total = total
      tableData.dataList = list
      imgSrcList.value = []
      nextTick(() => {
        tableData.dataList.forEach(row => {
          if (goodsIds.value.includes(row.goods_id)) {
            dialogSelfGoodsRef.value.toggleRowSelection(row, true)
          }
          if (row.imgurl_720) {
            imgSrcList.value.push(row.imgurl_720)
          }
        })
      })
    })
  }

  /** 点击单行 **/
  const handleRowClick = (row) => {
    if (!goodsIds.value.includes(row.goods_id)) {
      handleGetSelectedGoodsId(row)
      if (relGoodsFormData.datas.includes(row.goods_id)) {
        dialogSelfGoodsRef.value.toggleRowSelection(row, true)
      } else {
        dialogSelfGoodsRef.value.toggleRowSelection(row, false)
      }
    }
  }
  /** 选择数据行 **/
  const handleSelect = (selection, row) => {
    handleGetSelectedGoodsId(row)
  }
  /** 全选 **/
  const handleSelectAll = (selection) => {
    if (selection.length > 0) {
      selection.forEach(row => {
        if (!relGoodsFormData.datas.includes(row.goods_id)) {
          relGoodsFormData.datas.push(row.goods_id)
          goodsInfoList.value.push(row)
        }
      })
    } else {
      relGoodsFormData.datas = []
      goodsInfoList.value = []
    }
  }
  /** 获取选择的商品ID **/
  const handleGetSelectedGoodsId = (row) => {
    if (relGoodsFormData.datas.includes(row.goods_id)) {
      const index = relGoodsFormData.datas.findIndex(d => d == row.goods_id)
      relGoodsFormData.datas.splice(index, 1)
      goodsInfoList.value.splice(index,1)
    } else {
      relGoodsFormData.datas.push(row.goods_id)
      goodsInfoList.value.push(row)
    }
  }
  /** 是否可选 **/
  const handleSelectAble = (row) => {
    return !goodsIds.value.includes(row.goods_id)
  }
  defineExpose({
    getGoodsDataList
  })

</script>

<style scoped>

</style>
